<template>
  <div class="HomeCategory w">
    <div>
      <el-tabs v-model="activeName" @tab-click="tabClick">
        <el-tab-pane
          v-for="(item, index) in sub"
          :key="index"
          :label="item.name"
          :name="item.name"
        >
          <el-row type="flex" justify="center">
            <el-col class="content">
              <el-tag
                type="success"
                v-for="(item_m, item_index) in item.sub"
                :key="item_index"
                :class="activeTagName == item_m.name ? 'active' : null"
                @click="tagClick(item_m)"
              >
                {{ item_m.name }}
              </el-tag>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
      <!-- 实际渲染内容的区域 -->
      <GlobalCategoryItem
        v-if="categoryList.length != 0"
        :list="categoryList"
        class="GlobalCategoryItem"
        @clickItem="clickItemHandle"
      />
      <el-empty v-else description="正在加载请稍等~~"></el-empty>
      <!-- 分页 -->
      <el-row type="flex" class="row-bg" justify="center">
        <el-pagination
          layout="prev, pager, next"
          :total="total"
          :page-size="20"
          @current-change="paginationCurrentChange"
          :current-page="currentPage"
        >
        </el-pagination>
      </el-row>
    </div>
  </div>
</template>

<script>
import {
  getAllCategory,
  getOneCategoryList,
} from "../../../../api/categoryApi";
export default {
  name: "HomeCategory",
  data() {
    return {
      sub: [], // 所有分类的数组
      activeName: "",
      activeTagName: "",
      categoryList: [],
      total: 0,
      queryInfo: {
        limit: 20,
        offset: 0,
        cat: "",
      },
      currentPage: 1,
    };
  },
  async created() {
    await this.getAllCategoryMthods();
    await this.getOneCategoryListMethods();
  },
  methods: {
    // 获取分类信息
    async getAllCategoryMthods() {
      try {
        const result = await getAllCategory();
        if (result.code === 200) {
          // this.categories = result.categories;
          // this.sub = this.sub;
          // this.activeName = result.categories[0];
          // 重写 接口返回的数据格式
          let arr = [];
          for (let i in result.categories) {
            arr.push({ name: result.categories[i], id: i, sub: [] });
          }
          result.sub.forEach((item) => {
            // if (arr[0].id == item.category) {
            //   arr[0].sub.push(item);
            // }
            arr.forEach((foo, index) => {
              if (foo.id == item.category) {
                arr[index].sub.push(item);
              }
            });
          });
          arr.unshift({ name: "全部风格", sub: [{ name: "全部风格" }] });
          this.activeName = "全部风格";
          this.activeTagName = "全部风格";
          this.sub = arr;
        }
      } catch (error) {}
    },
    async getOneCategoryListMethods() {
      try {
        // console.log(this.activeTagName);
        if (this.activeTagName == "全部风格") {
          // console.log("进入执行");
          this.queryInfo.cat = "全部";
        }
        const result = await getOneCategoryList(this.queryInfo);
        if (result.code === 200) {
          this.categoryList = result.playlists;
          this.total = result.total;
        }
      } catch (error) {}
    },
    paginationCurrentChange(newPage) {
      // console.log(newPage);
      this.currentPage = newPage;
      this.queryInfo.offset = (newPage - 1) * this.queryInfo.limit;
      this.getOneCategoryListMethods();
      this.$utils.scrollTop(
        document.querySelector(".GlobalCategoryItem").offsetTop,
        200
      );
    },
    tabClick(item) {
      // item 是点击的选项卡的实例
    },
    // 点击 tag 的事件
    tagClick(item) {
      this.categoryList = [];
      this.activeTagName = item.name;
      this.queryInfo.cat = item.name;
      this.currentPage = 1;
      this.queryInfo.offset = 0;
      this.getOneCategoryListMethods();
    },
    // 子组件传递上来的点击事件
    clickItemHandle(item) {
      console.log("父组件接受到了");
      this.$router.push(`/categoryDetails/${item.id}`);
    },
  },
};
</script>

<style lang="less" scoped>
.HomeCategory {
  font-size: 14px;
  padding: 30px 0;
  // 样式覆盖
  /deep/ .el-tabs .el-tabs__nav-scroll {
    display: flex;
    justify-content: center;
  }
  /deep/ .el-tabs__item.is-active {
    color: @globalColor;
  }
  /deep/ .el-tabs .el-tabs__active-bar {
    background-color: @globalColor;
  }
  /deep/ .el-tabs .el-tabs__item {
    &:hover {
      color: @globalColor;
    }
  }
  /deep/ .el-tabs {
    padding-bottom: 20px;
  }

  /deep/ .el-pager li.active {
    color: #fff;
    background: @globalColor;
    border-radius: 50%;
    &:hover {
      color: #fff;
    }
  }
  /deep/ .el-pager li:hover {
    color: @globalColor;
  }
  .active {
    background-color: @globalColor;
    color: #ffffff;
  }
  .content {
    text-align: center;
    span {
      margin: 5px;
      font-size: 14px;
      &:hover {
        cursor: pointer;
      }
    }
  }
}
</style>
